<template>
  <!-- 表格开始 -->
  <jmash-table
    class="table-top"
    ref="multipleTableRef"
    row-key="id"
    :list-loading="listLoading"
    :data="tableData"
    :table-label="tableLabel"
    @selection-change="tableSelected"
    :is-selection="false"
  >
    <template #createTime="scope">
      <span>{{
        format(new Date(scope.data.row.createTime), "yyyy-MM-dd HH:mm:ss")
      }}</span>
    </template>
    <template #assignee="scope">
      <span @click="handleAssignee(scope.data.row)">{{
        rbacApi.userInfo(scope.data.row.assignee).nickName || "分配用户"
      }}</span>
    </template>
  </jmash-table>
</template>
<script setup lang="ts">
import { type Ref, ref } from "vue";
import { type TableColumn, useTableHooks } from "jmash-core";
import { format } from "date-fns";
import { rbacApi } from "jmash-rbac";

import { useI18n } from "vue-i18n";
const { t } = useI18n();

import type { TaskReq, FlowTaskModel } from "@/api/flow/task/types";

import { monitorTaskApi } from "@/api/flow/monitortask/index";

const props = defineProps({
  procInstId: {
    type: String,
    default: "",
  },
});
const queryParams = ref<TaskReq>({});
queryParams.value.procInstId = props.procInstId;

const { tableHooks, multipleTableRef, listLoading, tableData } = useTableHooks(
  t,
  monitorTaskApi,
  queryParams,
);

let tableLabel: Ref<TableColumn[]> = ref([
  {
    label: "task.no",
    type: "index",
    width: "60",
    isColumn: true,
  },
  {
    label: "task.name",
    prop: "name",
    isColumn: true,
  },
  {
    label: "task.createTime",
    prop: "createTime",
    width: "160",
    slotName: "createTime",
    columnType: "slot",
    sortable: true,
    isColumn: true,
  },
  {
    label: "task.assignee",
    prop: "assignee",
    width: "120",
    slotName: "assignee",
    columnType: "slot",
    sortable: true,
    isColumn: true,
  },
]);

const emit = defineEmits(["assignee"]);
// 分配
function handleAssignee(row: FlowTaskModel) {
  emit("assignee", row);
}

// 行选择
function tableSelected(value: FlowTaskModel[]) {
  tableHooks.selectionRows.value = value;
}

if (props.procInstId) {
  //查询数据.
  tableHooks.getList();
}
</script>
